<template>
  <div>
    <blockquote>演示@vueuse/motion预设动画</blockquote>
    <div class="flex justify-center items-center">
      <router-link to="/main/home/demos">
        <img v-motion-roll-left src="/vite.svg" class="logo" alt="Vite logo" />
      </router-link>
      <router-link to="/about">
        <img
          v-motion-roll-right
          src="@/assets/vue.svg"
          class="logo vue"
          alt="Vue logo"
        />
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.logo {
  height: 10em;
  padding: 1.5em;
  will-change: filter;
  transition: ease-in-out 1000ms;
  &:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
